<template>
	<view class="container"
		:style="details.info.repairsStatus==6&&details.info.moneyState==1?'padding-bottom: 120px;':''">
		<view class="repairDetail">
			<view style="float: right;margin-right: 12px;">
				<view class="notice-typePu" v-if="details.info.repairsStatus == 1">客服待接单</view>
				<view class="notice-typePu" v-if="details.info.repairsStatus == 2">客服待派单</view>
				<view class="notice-typePu" v-if="details.info.repairsStatus == 3">维修待接单</view>
				<view class="notice-typePu" v-if="details.info.repairsStatus == 4">维修待维修</view>
				<view class="notice-typeBlue" v-if="details.info.repairsStatus == 5">维修中</view>
				<view class="notice-typePu" v-if="details.info.repairsStatus == 6&&details.info.moneyState == 1">待缴
				</view>
				<view class="notice-typePuTong" v-if="details.info.repairsStatus == 6&&details.info.moneyState == 2">已缴
				</view>
				<view class="notice-typePuTong" v-if="details.info.repairsStatus == 6&&details.info.moneyState == 3">免单
				</view>
				<view class="notice-type" v-if="details.info.repairsStatus == 7">客服取消工单</view>
			</view>

			<view class="repair-cont">
				<view class="polling" style="display: flex;align-items: center;">
					<image style="width: 40rpx;height: 40rpx;" src="../../static/image/repairList.png" alt=""></image>
					<view class="polling_name" style="text-align: start;margin-left: 10rpx;">
						{{details.info.projectName}}-{{details.info.buildDistrictCode}}-{{details.info.buildTowerCode}}-{{details.info.roomUnitNumber}}-{{details.info.roomCode}}
					</view>
				</view>
				<view class="header-center">
					<view class="detail-li">
						<view class="detail-name" style="color:#666">工单号：</view>
						<view class="detail-text" style="color:#000000">{{ details.info.repairsCode }}</view>
					</view>
					<view class="detail-li">
						<view class="detail-name" style="color:#666">报修时间：</view>
						<view class="detail-text">{{ details.info.repairsCreateTime}}</view>
					</view>
					<view class="detail-li">
						<view class="detail-name" style="color:#666">报修分类：</view>
						<view class="detail-text">{{ details.info.subjectName }}</view>
					</view>
				</view>
				<view class="detail-li">
					<view class="detail-name" style="color:#666">维修说明：</view>
					<view class="detail-text">{{ details.info.repairsInfo }}</view>
				</view>
				<view class="detail-li">
					<view class="detail-img-list">
						<image @click="preview(index)" v-for="(item, index) in details.info.repairsPicture" :key="index"
							class="detail-img" :src="item"></image>

					</view>
				</view>
				<view class="detail-li">
					<view class="detail-name" style="color:#666">报修人：</view>
					<view class="detail-text">{{ details.info.userName }}</view>
				</view>
				<view class="detail-li">
					<view class="detail-name" style="color:#666">联系方式：</view>
					<view class="detail-text">{{details.info.userTel}}</view>
				</view>
				<view class="detail-li" style="padding-bottom: 20px;">
					<view class="detail-name" style="color:#666">预约时间：</view>

					<view class="detail-text">
						<!-- {{ details.info.repairsAppointmentStartTime }}~{{ details.info.repairsAppointmentStartTime.split(' ')[1] }} -->
						{{ details.info.repairsAppointmentStartTime }}~{{ details.info.repairsAppointmentEndTime}}
					</view>
				</view>
			</view>

			<view class="repair-cont"
				v-if="details.info.repairsStatus!=1&&details.info.repairsStatus!=2&&details.orders">
				<view class="detail-li" v-if="details.orders.sysUserName!=null">
					<view class="detail-name">派单人：</view>
					<view class="detail-text" style="color:#666">{{ details.orders.sysUserName }}</view>
				</view>
				<view class="detail-li" style="padding-bottom: 20px;" v-if="details.orders.createTime!=null">
					<view class="detail-name">派单时间：</view>
					<view class="detail-text" style="color:#666">{{ details.orders.createTime }}</view>
				</view>
			</view>

			<view class="repair-cont"
				v-if="details.info.repairsStatus!=1&&details.info.repairsStatus!=2&&details.orders">
				<view class="detail-li" v-if="details.orders.sysEmpUserName!=null">
					<view class="detail-name" style="color:#666">维修人员：</view>
					<view class="detail-text">
						{{ details.orders.sysEmpUserName }}
						<span class="yellow">(服务分:{{rateValue}}/5)</span>
					</view>
				</view>
				<view class="detail-li" v-if="details.orders.sysEmpUserTel!=null">
					<view class="detail-name" style="color:#666">联系方式：</view>
					<view class="detail-text">{{ details.orders.sysEmpUserTel }}</view>
				</view>
				<view class="detail-li" style="padding-bottom: 20px;" v-if="details.orders.todoorTime!=null">
					<view class="detail-name">上门时间：</view>
					<view class="detail-text" style="color:#666">{{ details.orders.todoorTime }}</view>
				</view>
			</view>


			<view class="repair-cont" v-if="details.info.repairsStatus==6">
				<view class="detail-li" v-if="details.orders.operationTime!=null">
					<view class="detail-name" style="color:#666">开始时间：</view>
					<view class="detail-text">{{ details.orders.operationTime }}</view>
				</view>
				<view class="detail-li" v-if="details.orders.time!=null">
					<view class="detail-name" style="color:#666">维修时长：</view>
					<view class="detail-text">{{ details.orders.time|tiemFilter }}</view>
				</view>
				<view class="detail-li" v-if="details.orders.picture!=null&&details.orders.picture!=''">
					<view class="detail-name" style="color: #666;">维修图片</view>
					<view class="img-list" v-for="(item,index) in details.orders.picture.split(',')" :key="index">
						<image class="process-img" :src="item"></image>
					</view>
				</view>
				<view class="detail-li" v-if="details.orders.moneyState==3">
					<view class="detail-name">状态：</view>
					<view class="detail-text yellow">免单</view>
				</view>
				<view class="detail-li" style="padding-bottom: 20px;" v-if="details.info.moneyState!=3">
					<view class="detail-name">总计金额：</view>
					<view class="detail-text yellow" style="color:#666">￥{{ details.info.money }}元</view>
				</view>
			</view>

			<view class="repair-cont" v-if="details.info.repairsStatus==6&&details.info.moneyState!=1">
				<view style='display: flex;margin: 0 0 15px 0;justify-content: space-between;padding-bottom: 20px'>
					<view style='display: flex;'>
						<view style='font-size: 18px;font-weight: bold;color: #333;margin-right: 10px;'>
							当前维修人员评分
						</view>
						<view class="rep-deta-box-l rep-deta-box-l2" style='margin-top: -1px;'>
							<uni-rate disabled :margin="8" allow-half :size="18" disabledColor="#F9A832"
								v-model="rateValue" />
						</view>
						<view style="color:#F9A832;margin-left: 5px;font-size: 14px;margin-top: 1px;"
							class="rep-deta-box-r">
							{{rateValue}}
						</view>
					</view>
					<view class="" style='color:#578EF0;font-size: 15px;' @click='handleSee'>
						查看
					</view>
				</view>
			</view>

			<view class="repair-cont" v-if="details.info.repairsStatus==6&&id!=null">
				<view class="" style='display: flex;'>
					<view class="" style='font-size: 18px;font-weight: bold;color: #333;margin-right: 10px;'>
						当前维修人员评分
					</view>
					<view class="rep-deta-box-l rep-deta-box-l2" style='margin-top: -1px;'>
						<uni-rate disabled :margin="8" allow-half :size="18" disabledColor="#F9A832" v-model="scores" />
					</view>
					<view style="color:#F9A832;margin-left: 5px;font-size: 14px;margin-top: 1px;"
						class="rep-deta-box-r">
						{{rateValue}}
					</view>
				</view>
				<view>
					<view class="" style='font-size: 18px;font-weight: bold;color: #333;margin-right: 10px;'>
						本次评价
					</view>
					<view style="color:#333333;text-indent: 2em;line-height:2em">{{remark}}</view>
				</view>
			</view>
			<view style="margin-top: 20px;padding-bottom: 20px;" v-if="details.info.repairsStatus == 1||
				      details.info.repairsStatus == 2||
				      details.info.repairsStatus == 3||
				      details.info.repairsStatus == 4">
				<button class="yilingqu" @click='showcal = true'>取消报修</button>
			</view>
			<view style="margin-top: 20px;padding-bottom: 20px;"
				v-if="details.info.repairsStatus==6&&details.info.moneyState!=1&&id == null">
				<button class="yilingqu" @click='showPop = true'>点击评价</button>
			</view>

		</view>

		<view class="paymentStyle" v-if="details.info.repairsStatus==6&&details.info.moneyState==1">
			<view class="mainpayment">
				<view class="mian_content1">
					<view class="u-flex">
						<image style="width: 25px;height: 25px;" src="../../static/image/wechatFriend.png" mode="">
						</image>
						<view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px;">微信支付
						</view>
						<u-checkbox shape="circle" v-model="weChat" active-color="#427705c7" @change="dianji(1)"><span
								style="color: #999;" </span></u-checkbox>
					</view>
					<view class="u-flex">
						<image style="width: 20px;height: 20px;" src="../../static/image/zhifubao.png" mode="">
						</image>
						<view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px">支付宝支付
						</view>
						<u-checkbox shape="circle" v-model="alipay" active-color="#427705c7" @change="dianji(0)"><span
								style="color: #999;" </span></u-checkbox>
					</view>
				</view>
			</view>

			<view class="foot">
				<view class="footer u-padding-left-30">
					<view style="display: flex;justify-content:space-between">
						<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text style="font-size: 44rpx;color: #F9A832;"
								class="txet">￥{{details.info.money}}</text></view>
						<view class="button" @click="toPay2">立即缴费</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 取消报修弹窗 -->
		<view class="modal" v-if="showcal">
			<view class="modal-cont">
				<view class="modal-title">取消报修</view>
				<view style="padding: 40rpx 40rpx; 20rpx">
					<view class="" style='display: flex;margin: 0 0 15px 0;'>
						<view class="" style='font-size: 16px;font-weight: bold;color: #333;margin-right: 10px;'>
							取消原因：
						</view>
					</view>
					<textarea class="popup_textarea" placeholder='请输入取消原因' v-model="cancelresponse">
				    </textarea>
				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="showcal = false">取消</view>
					<view class="btn-sure" @click="cancelRepair">确认</view>
				</view>
			</view>
		</view>
		<!-- 维修评价弹窗 -->
		<view class="modal" v-if="showPop">
			<view class="modal-cont">
				<view class="modal-title">本次评价</view>
				<view style="padding: 40rpx 40rpx; 20rpx">
					<view class="" style='display: flex;margin: 0 0 15px 0;'>
						<view class="" style='font-size: 18px;font-weight: bold;color: #333;margin-right: 10px;'>
							本次服务评分
						</view>
						<view class="rep-deta-box-l rep-deta-box-l2" style='margin-top: -1px;'>
							<uni-rate :margin="8" allow-half :size="18" active-color="#F9A832" v-model="scores" />
						</view>
						<view style="color:#F9A832;margin-left: 5px;font-size: 14px;margin-top: 1px;"
							class="rep-deta-box-r">
							{{scores}}
						</view>
					</view>
					<textarea class="popup_textarea" placeholder='请输入您的评价...' v-model="remark">
				</textarea>

				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="showPop = false">取消评价</view>
					<view class="btn-sure" @click="releaseBtn">确认评价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniRate
	} from '@dcloudio/uni-ui'

	export default {
		components: {
			uniRate
		},
		data() {
			return {
				scores: 0,
				id: null,
				remark: null,
				rateValue: '3',
				active: 0,
				list: [{
						name: '支付宝',
						link: "https://clhy-file.oss-cn-beijing.aliyuncs.com/2022-3-28%E5%88%9B%E5%BB%BA%20%E4%B8%9A%E4%B8%BBapp/bao.png"
					},
					{
						name: '微信',
						link: "https://clhy-file.oss-cn-beijing.aliyuncs.com/2022-3-28%E5%88%9B%E5%BB%BA%20%E4%B8%9A%E4%B8%BBapp/wx.png"
					},
				],

				//微信
				weChat: true,
				//支付宝
				alipay: false,

				src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
				count: 6,
				value: 1,
				details: {
					info: {},
					orders: {
						employeeId: null,
						time: 0,
					}
				},
				homeData: {},
				showPop: false, //评价弹窗
				showcal: false, //取消报修弹窗
				cancelresponse:'',//取消原因
			}
		},
		filters: {
			tiemFilter(val) {
				console.log(val)
				let hh = Math.floor(val / 3600)
				let mm = Math.floor(val / 60);
				let ss = val % 60
				return (hh < 10 ? '0' + hh + '小时' : hh + '小时') + ' ' + (mm < 10 ? '0' + mm + '分钟' : mm + '分钟') + ' ' + (
					ss < 10 ? '0' + ss + '秒' : ss + '秒')
			}
		},
		onShow() {
			this.getDetails()
			this.homeData = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		methods: {
			cancelRepair(){
				if(!this.cancelresponse){
					uni.showToast({
						title: '取消报修原因不能为空',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.$request.api.cancelRepair({
					repartsId: this.details.info.id,
					sign: 3,
					text: this.cancelresponse,
					user_id:uni.getStorageSync('rawData').userId,
				}).then((res)=>{
					this.showcal=false
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}).catch((erro)=>{
					this.showcal=false
					uni.showToast({
						title: erro,
						duration: 2000,
						icon: 'none'
					});
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
			},
			handleSee() {
				uni.navigateTo({
					url: '/pages/repairDetails/scoreDetails?id=' + this.details.orders.employeeId
				})
			},
			getScore() {
				this.scores = 0
				this.id = null
				this.$request.api.getScoreInfo({
					user_id: uni.getStorageSync('rawData').userId,
					room_id: uni.getStorageSync('projectItem').roomId,
					pro_id: uni.getStorageSync('projectItem').proId,
					score_type: 1,
					relational_id: this.details.info.id,
				}).then(res => {
					if (res.data.data.scores) {
						this.scores = res.data.data.scores;
						this.id = res.data.data.id;
						this.remark = res.data.data.remark;
					} else {
						this.value = 0
						this.id = null
					}
				})
			},
			releaseBtn() {
				if (this.scores < '0.5') {
					uni.showToast({
						title: '最低评分0.5分奥，请高于或等于0.5分~',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (this.remark == null) {
					uni.showToast({
						title: '评价不能为空熬，随便写点吧',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.$request.api.addScoreRecord({
					user_id: uni.getStorageSync('rawData').userId,
					score_type: 1,
					pro_id: uni.getStorageSync('projectItem').proId,
					scores: this.scores,
					room_id: uni.getStorageSync('projectItem').roomId,
					remark: this.remark,
					by_user_id: this.details.orders.employeeId,
					id: this.id ? this.id : null,
					relational_id: this.details.info.id,
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						this.showPop = false
						this.getScore();
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			dianji(index) {
				this.active = index;

				if (index == 1) {
					this.weChat = true
					this.alipay = false
				} else {
					this.alipay = true
					this.weChat = false
				}
			},
			// 获取详情
			getDetails() {
				this.$request.api.repairDet({
					mobile: uni.getStorageSync('phone'),
					id: this.$Route.query.id
				}).then(res => {
					this.details = res.data.data;
					this.getScore();
					this.details.info.repairsAppointmentEndTime = this.details.info.repairsAppointmentEndTime
						.slice(11)
					this.details.info.repairsPicture = JSON.parse(this.details.info.repairsPicture)
				})
			},

			toPay2() {
				this.$request.api.repaidQrCode({
					pay_user_id: uni.getStorageSync('rawData').userId, //缴费人
					pay_path: "xcx", //缴费方式
					money: Number(this.details.info.money).toFixed(2), //金额
					code: this.details.info.repairsCode, //订单号
				}).then(res => {
					if (res.data.code == 0) {
						if (this.alipay == true) {
							console.log(this.homeData)
							//支付宝
							const order = this.details.info.repairsCode; //订单编号
							const money = Number(this.details.info.money).toFixed(2); //金额
							const proId = this.homeData.proId;

							const URL = encodeURIComponent(
								`https://www.515f.com/adapay?key=${order}&money=${money}&proId=${proId}`);
							let authUrl = `alipays://platformapi/startapp?saId=10000007&qrcode=` + URL;
							//console.log(authUrl);
							plus.runtime.openURL(authUrl, function(res) {
								uni.showToast({
									icon: "none",
									title: "请安装支付宝之后再进行支付！",
								});
							});
						} else {
							//微信
							//跳转至小程序支付
							let data = {
								id: this.$Route.query.id,
								address: this.homeData,
							}
							let str = JSON.stringify(data)
							console.log(str)
							// 小程序跳转
							plus.share.getServices(
								res => {
									let sweixin = null;
									for (let i in res) {
										if (res[i].id == 'weixin') {
											sweixin = res[i];
										}
									}
									//唤醒微信小程序
									if (sweixin) {
										sweixin.launchMiniProgram({
											id: 'gh_356131c8d206', //
											type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
											path: 'pages/repairDetails/repairDetails?data=' +
												str //小程序的页面,用传的参数在小程序接值判断跳转指定页面
										});
									}
									console.log(str)
								}
							);
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			// 去支付
			toPay() {
				let _this = this;
				this.$request.api.repaidPay({
					proId: uni.getStorageSync('projectItem').proId, //（项目ID）
					money: this.details.info.money, //（金额）
					pay_type: 'wx_lite', //（支付渠道）
					goods_title: '报修', //（商品标题）
					goods_desc: '报修', //（商品描述信息）
					open_id: uni.getStorageSync('openId'),
					id: _this.$Route.query.id
				}).then(res => {
					if (res.data.data.status == 'failed') {
						this.$refs.uToast.show({
							title: res.data.data.error_msg,
							type: 'error'
						})
					} else {
						let payInfo = JSON.parse(res.data.data.expend.pay_info)
						console.log(this.payInfo)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,
							success: function(res) {},
							fail: function(err) {
								console.log('支付失败:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			showImg(val) {
				uni.previewImage({
					urls: [val],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//返回上一页
			prev() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		/* 根据支付样式的高度调整 */
	}

	.popup_textarea {
		background: #F2F3F5;
		width: 94%;
		height: 54px;
		padding: 10px;
		border-radius: 5px;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.wai {
		width: 100%;
		height: 400rpx;
		margin-top: 100rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		line-height: 70rpx;
	}

	.beixuan {
		height: 120rpx;
		font-size: 36rpx;
		padding: 0 60rpx;
		border: 1rpx solid #dddddd;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		color: #aaa;
	}

	.active {
		border: 4rpx solid #00ce88;
		color: #00ce88;
	}

	.rep-deta-wrap {
		width: 100vw;
		height: auto;
		min-height: 100vh;

		.u-btn {
			background: #F9A832 !important;
		}
	}

	.rep-deta-box {
		width: 100%;
		min-height: 28rpx;
		height: auto;
		overflow: hidden;
		line-height: 28rpx;

		.rep-deta-box-l {
			float: left;
			color: #666;
			font-size: 28rpx;

			&.rep-deta-box-l2 {
				margin-left: 30rpx;
			}
		}

		.rep-deta-box-r {
			float: right;
			color: #333;
			font-size: 28rpx;
		}

		.rep-deta-box-c {
			color: #999;
		}

		image {
			width: 216rpx;
			height: 216rpx;
			float: left;
			margin-right: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.rep-deta-row {
		width: 100%;
		height: 20rpx;
		background: #f9f9f9;
	}

	.pay_box {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0px rgba(0, 0, 0, 0.1);

		.pay_box_left {
			width: 210rpx
		}
	}

	.pay_box_btn {
		width: 110px;
		height: 40px;
	}

	.green_button {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.repairDetail {
		background: #f9f9f9;

		.yellow {
			color: #f9a832;
		}

		.img-list {
			width: 126rpx;
			height: 126rpx;
			margin-right: 28rpx;
			position: relative;
		}

		.process-img {
			width: 126rpx;
			height: 126rpx;
			border-radius: 8rpx;
		}

		.repair-cont {
			padding: 40rpx 40rpx 0;
			background: #ffffff;

			.detail-li {
				display: flex;
				margin: 0 0 20rpx 0;
				font-size: 28rpx;
				padding-left: 7px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;

				.detail-name {
					width: 137rpx;
					line-height: 44rpx;
					font-weight: 500;
				}

				.detail-text {
					width: 510rpx;
					font-weight: 400;
					line-height: 22px;
				}

				.detail-img-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					width: 100%;

					.detail-img {
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						// margin-right: 24px;
					}
				}
			}
		}

		.polling {
			font-size: 18px;
			padding-top: 2px;
			text-align: center;
		}

		.polling_name {
			// color: #000000;
			font-weight: bold;
			width: 100%;
		}
	}

	.header-center {
		width: 103%;
		margin: 14px -6px;
		padding-top: 14px;
		background-color: #FFFFFF;
		padding-left: 5px;
		padding-bottom: 2px;
		border-radius: 10px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
	}

	.notice-typePu {
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
		line-height: 28px;
	}

	.notice-type {
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
		line-height: 28px;
	}

	.notice-typePuTong {
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
		line-height: 28px;
	}

	.notice-typeBlue {
		background: linear-gradient(90deg, #578ef094 0%, #3d7fff 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
		line-height: 28px;
	}

	.modal {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: 0.6);
		z-index: 999;

		.modal-cont {
			width: 85%;
			// min-height: 420rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.modal-title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 700;
				color: #333333;
				line-height: 45rpx;
				margin-top: 22rpx;
				// align-items: center
				text-align: center;
				border-bottom: 1px solid #d5d5d6;
				padding: 0px 0px 20rpx 0;

			}

			.modal-bottom {
				width: 100%;
				height: 84rpx;
				border-top: 1rpx solid #e6e9ed;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn-cancel {
					width: 50%;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					border-right: 1rpx solid #d8d8d8;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					box-sizing: border-box;
				}

				.btn-sure {
					width: 50%;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #578ef0;
				}
			}
		}
	}

	.mainpayment {
		padding: 10px;
		position: fixed;
		bottom: 52px;
		width: 100%;
	}

	.paymentStyle {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.mian_content1 {
		background: #fff;
		padding: 38rpx 36rpx;
		border-radius: 16px;
		display: flex;
		justify-content: space-between;
	}

	.foot .footer {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
		box-shadow: 28px 1px 6px rgba(0, 0, 0, 0.15);
	}

	.button {
		text-align: center;
		background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
		color: #fff;
		padding: 7px 18px;
		border-radius: 8px;
		margin-right: 10px;
		margin-top: 15px;
	}
</style>